<template>
	<view class="personalCenter">
		<view class="head">
			<image class="user_icon" src="/static/images/home/user_icon.png"></image>
			<!-- <image class="user_vip" src="/static/images/home/user_vip.png"></image> -->
			<view class="info">
				<view class="name">{{name}}</view>
				<view class="phone">{{mobilePhone}}</view>
			</view>
		</view>
		<view class="card">
			<view class="row">
				<view class="label">功能权限</view>
				{{roleName}}
			</view>
			<view class="row">
				<view class="label">数据权限</view>
				{{dateAuthType}}
			</view>
			<view class="action" @tap="logout">退出登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobilePhone: '-',
				name: '-',
				roleName: '-',
				dateAuthType: '-',
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.http.GET({
					name: 'myinfo',
				})
				.then(res => {
					if(res.result === 'success') {
						this.mobilePhone = res.data.mobilePhone
						this.name = res.data.name
						this.roleName = res.data.roleName
						this.dateAuthType = res.data.dateAuthType
					}
				})
			},
			logout() {
				uni.removeStorageSync('roleType');
				uni.removeStorageSync('userId');
				uni.removeStorageSync('departId');
				uni.removeStorageSync('departName');
				uni.reLaunch({
				 	url: '/pages/login/index'
				})
			}
		},
	}
</script>

<style>
	.personalCenter .head {
		background-color: #FFFFFF;
		width: 100%;
		padding: 40upx 30upx;
		position: relative;
		display: flex;
	}
	.head .user_icon {
		width: 100upx;
		height: 100upx;
		margin-right: 20upx;
	}
	.head .user_vip {
		width: 30upx;
		height: 30upx;
		position: absolute;
		bottom: 40rpx;
		left: 90rpx;
	}
	.head .info {
		padding: 10upx 20upx;
		height: 100upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.head .info .name {
		color: #666666;
		font-size: 30upx;
	}
	.head .info .phone {
		color: #666666;
		font-size: 28upx;
	}
	
	.personalCenter .card {
		width: 100%;
		background-color: #FFFFFF;
		padding: 0upx 30upx;
	}
	.card .row {
		border-bottom: 1upx solid #DDDDDD;
		font-size: 30upx;
		padding: 30upx 0upx;
		display: flex;
		justify-content: space-between;
	}
	.card .row .label {
		font-size: 30upx;
	}
	.action {
		padding: 30upx 0upx;
		font-size: 30upx;
		text-align: center;
	}
</style>
